<script>
import * as echarts from "../../public/libs/echarts5.esm";
import { InfoCircleOutlined } from "@ant-design/icons-vue";

export default {
  name: "OnlineExamPassRank",
  components: {
    InfoCircleOutlined,
  },
  props: {
    echartsId: {
      type: Number,
      default() {
        return {};
      },
    },
    isView: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      exam: 1,
      examData: [
        { id: 1, name: "考试1" },
        { id: 2, name: "考试2" },
        { id: 3, name: "考试3" },
      ],
      data: [
          {
            "orgName": "部门1长长的部门名称长长的部门名称",
            "examPassedRate": 20
          },
          {
              "orgName": "部门2",
              "examPassedRate": 70
          },
          {
              "orgName": "部门3",
              "examPassedRate": 60
          },
          {
              "orgName": "部门4",
              "examPassedRate": 50
          },
          {
              "orgName": "部门5",
              "examPassedRate": 40
          }
        ]
    };
  },
  mounted() {
    let ele = document.getElementById(`online-exam-pass-rank${this.echartsId}`);
    let echartsElement = echarts.init(document.getElementById(`online-exam-pass-rank-echarts${this.echartsId}`));
    const resizeObserver = new ResizeObserver(() => {
      echartsElement.resize();
    });
    resizeObserver.observe(ele);
    let echartsData = {
      yAxisData: [],
      seriesData: []
    };
    this.data.forEach(item => {
      echartsData.yAxisData.push(item.orgName);
      echartsData.seriesData.push(item.examPassedRate);
    });
    let echartsOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        padding: 0,
        backgroundColor: "rgba(255, 255, 255, 0)",
        borderWidth: 0,
        formatter: function (params) {
          const item = params[0];
          let htmlContent = `<div style="background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%); backdrop-filter: blur(5px); border-radius: 2px; padding: 8px;">
            <div style="max-width: 164px; overflow: hidden; text-overflow: ellipsis; color: #1D2129; font-weight: 600;">${item.name}</div>
            <div style="background: rgba(255, 255, 255, 0.8); box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1); border-radius: 4px; padding: 8px;">
              <span style="color: #4E5969; margin-right: 16px;">考试通过率</span>
              <span style="color: #1D2129; float: right;">${item.value}%</span>
            </div>
          </div>`;
          return htmlContent;
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        splitLine: {
          lineStyle: {
            type: [5, 7],
            dashOffset: 3
          }
        },
        max: 100,
        min: 0,
        interval: 20,
        axisLabel: {
          formatter: '{value}%'
        }
      },
      yAxis: {
        type: "category",
        data: echartsData.yAxisData,
        axisLabel: {
          width: 70,
          overflow: "truncate",
          ellipsis: "...",
        },
        axisTick: {
          alignWithLabel: true
        }
      },
      series: [
        {
          name: "线上考试通过率排行榜",
          type: "bar",
          data: echartsData.seriesData,
          barWidth: 22,
          itemStyle: {
            color: "#0093FF",
          },
          label: {
        show: true,
        position: 'inside',
        formatter: '通过率：{c}%',
        textStyle: {
          color: '#FFF'
        }
      }
        },
      ],
    };
    if (this.isView) {
      echartsOption.series[0].label = {
        show: true,
        position: 'inside',
        formatter: '通过率：{c}%',
        textStyle: {
          color: '#FFF'
        }
      }
    }
    echartsElement.setOption(echartsOption);
  },
  
  methods: {
    focus() {},
    handleChange() {
      console.log('exam:',this.exam)
    },
  },
};
</script>

<template>
  <div class="online-exam-pass-rank" :id="`online-exam-pass-rank${echartsId}`">
    <div class="header">
      <div class="header__left" v-if="isView">
        <div class="header__left__line"></div>
        <span class="font-semibold">考试名称</span>
        <span class="font-semibold">-部门线上考试通过率排行榜</span>
      </div>
      <div class="header__left" v-else>
        <div class="header__left__title font-semibold">线上考试通过率排行榜</div>
        <a-tooltip placement="topLeft">
          <template #title>
            <span>统计范围为学员所属部门和项目任一线上考试</span>
          </template>
          <InfoCircleOutlined />
        </a-tooltip>
      </div>
      <div class="" v-if="!isView">
        <a-select
          ref="select"
          v-model:value="exam"
          style="width: 156px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option
            :value="item.id"
            v-for="item in examData"
            :key="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <div
      class="echarts-box"
      :id="`online-exam-pass-rank-echarts${echartsId}`"
    ></div>
  </div>
</template>

<style lang="less" scoped>
.online-exam-pass-rank {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;

    .header__left {
      display: flex;
      align-items: center;

      .header__left__line {
        width: 8px;
        height: 22px;
        background: #0093FF;
        margin-right: 8px;
      }

      .header__left__title {
        margin-right: 4px;
      }

      .font-semibold {
        font-weight: 600;
      }
    }
  }

  .echarts-box {
    width: 100%;
    height: 380px;
    padding: 0 24px 24px 24px;
  }
}
</style>
